<template>
  <div class="task-hall-container">
    <div class="task-content">
      <h1 class="page-title">任务大厅</h1>

      <!-- 任务筛选区 -->
      <el-row :gutter="20" class="filter-bar">
        <el-col :span="6">
          <el-input placeholder="搜索任务名称" v-model="searchKeyword">
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="filterStatus" placeholder="选择状态">
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>

      <!-- 任务列表 -->
      <el-table :data="filteredTasks" style="width: 100%">
        <el-table-column prop="name" label="任务名称" width="200" />
        <el-table-column label="任务进度" width="150">
          <template #default="{ row }">
            <el-progress
                :percentage="row.progress"
                :status="progressStatus(row.progress)"
                :text-inside="true"
                :stroke-width="20"
            />
          </template>
        </el-table-column>
        <el-table-column label="参与节点" width="120">
          <template #default="{ row }">
            <el-tag type="info">{{ row.participants }} 节点</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="任务描述" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
                type="primary"
                size="small"
                @click="handleJoin(row)"
            >加入任务</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="100"
          :page-size="10"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {createRouter as $router} from "vue-router";

// 模拟任务数据
const tasks = ref([
  {
    id: 1,
    name: '医疗影像分类',
    progress: 65,
    participants: 142,
    status: 'running',
    description: '基于X光片的肺炎检测模型训练'
  },
  {
    id: 2,
    name: '金融风控模型',
    progress: 32,
    participants: 89,
    status: 'pending',
    description: '跨机构联合信用风险评估'
  },
  {
    id: 3,
    name: '智能推荐系统',
    progress: 88,
    participants: 256,
    status: 'running',
    description: '电商用户行为分析推荐'
  }
])

// 筛选条件
const searchKeyword = ref('')
const filterStatus = ref('all')
const statusOptions = [
  { value: 'all', label: '全部状态' },
  { value: 'running', label: '进行中' },
  { value: 'pending', label: '未开始' },
  { value: 'completed', label: '已完成' }
]

// 过滤后的任务列表
const filteredTasks = computed(() => {
  return tasks.value.filter(task => {
    const matchKeyword = task.name.includes(searchKeyword.value)
    const matchStatus = filterStatus.value === 'all' ||
        task.status === filterStatus.value
    return matchKeyword && matchStatus
  })
})

// 进度条状态
const progressStatus = (percentage) => {
  return percentage >= 80 ? 'success' : percentage >= 50 ? '' : 'exception'
}

const handleJoin = (task) => {
  ElMessage.success(`正在加入任务：${task.name}`)
}
</script>

<style scoped>
.task-hall-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-title {
  color: #2c3e50;
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.filter-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

.nav-menu {
  padding: 0 20px;
}

.task-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-item {
  cursor: pointer;
}
</style>